{% set product = hookable_metadata.context.product %}

{% if product.isConfigurable() %}
    {% set channels = hookable_metadata.context.channels %}

    <div class="table-responsive">
        <table class="table table-vcenter">
            <thead>
                <tr>
                    {% hook 'configurable_product#head' %}
                </tr>
            </thead>
            <tbody>
                {% for variant in product.variants %}
                    <tr {{ sylius_test_html_attribute('variant', "%s"|format(variant.code)) }}>
                        {% hook 'configurable_product#tab' with { variant, product } %}
                    </tr>
                    <tr class="bg-gray-100">
                        <td colspan="9" class="p-0 border-0">
                            <div class="px-3 px-md-5 py-3 collapse" id="product-variant-details-{{ variant.code }}">
                                {% hook 'configurable_product#details' with { variant } %}
                            </div>
                        </td>
                    </tr>
                {% endfor %}
            </tbody>
        </table>
    </div>
{% endif %}
